<script setup lang="tsx">
import { ref } from 'vue';
import { ElButton, ElTag, ElPopconfirm, ElPagination } from 'element-plus';
import { utils, writeFile } from 'xlsx';
import { enableStatusRecord, businessTypeMap } from '@/constants/business'; // 修改导入，移除 userGenderRecord，添加 businessTypeMap
import { fetchGetAuthList } from '@/service/api/auth';
import { useTable } from '@/hooks/common/table';
import { $t } from '@/locales';

// 导入子组件
// import RoleSearch from './modules/role-search.vue'; // 角色搜索组件 - 日志页面可能不需要或需要不同的搜索组件
// import OperateDrawer from './modules/operate-drawer.vue'; // 用户操作抽屉组件 - 日志通常为只读，不需要操作抽屉

defineOptions({ name: 'ExcelPage' });

// ---------- 状态定义 ----------
/**
 * 抽屉可见性控制
 * 控制用户添加/编辑抽屉的显示状态
 */
const visible = ref(false);

/**
 * 操作类型，添加或编辑
 * 用于区分当前抽屉是添加模式还是编辑模式
 */
const operateType = ref<UI.TableOperateType>('add');

/**
 * 选中的行数据，用于编辑
 * 当点击编辑按钮时，将当前行数据存储在此变量中
 */
const editingData = ref<Api.SystemSetting.login | null>(null); // 修改编辑数据的类型为日志类型

/**
 * 选中的行keys
 * 用于批量删除功能
 */
const checkedRowKeys = ref<any[]>([]);

// ---------- 表格配置 ----------
/**
 * 表格相关配置和数据
 * 使用useTable hook管理表格状态
 */
const { 
  columns,         // 表格列配置
  data,            // 表格数据
  columnChecks,    // 列显示控制
  loading,         // 加载状态
  searchParams,    // 搜索参数
  resetSearchParams, // 重置搜索参数方法
  getDataByPage,   // 分页获取数据方法
  getData,         // 获取数据方法
  pagination       // 分页配置
} = useTable({
  apiFn: fetchGetAuthList, // 获取用户列表的API
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,  // 修改为每页10条记录
    businessType: undefined,
    createBy: undefined
  },
  columns: () => [
    { type: 'selection', width: 48 },
    { prop: 'index', label: $t('common.index'), width: 64 },
    { prop: 'description', label: $t('page.manage.log.description'), minWidth: 200 },
    {
      prop: 'businessType',
      label: $t('page.manage.log.businessType'),
      width: 120,
      formatter: row => {
        if (row.businessType === undefined) {
          return '';
        }
        const type = businessTypeMap[row.businessType as Api.SystemSetting.BusinessType] || { label: 'common.unknown', tagType: 'info' };
        return <ElTag type={type.tagType as UI.ThemeColor}>{$t(type.label)}</ElTag>;
      }
    },
    { prop: 'method', label: $t('page.manage.log.method'), minWidth: 150 },
    { prop: 'requestMethod', label: $t('page.manage.log.requestMethod'), width: 100 },
    { prop: 'reqIp', label: $t('page.manage.log.reqIp'), width: 130 },
    { prop: 'createBy', label: $t('page.manage.log.createBy'), minWidth: 100 },
    { prop: 'createTime', label: $t('common.createTime'), width: 180 }
    // 日志通常为只读，移除操作列
    // {
    //   prop: 'operate',
    //   label: $t('common.operate'),
    //   fixed: 'right',
    //   width: 120,
    //   formatter: row => (
    //     <div class="flex-center">
    //       <ElButton type="primary" plain size="small" onClick={() => edit(row as Api.SystemSetting.login)}>
    //         {$t('common.edit')}
    //       </ElButton>
    //       <ElPopconfirm title={$t('common.confirmDelete')} onConfirm={() => handleDelete(row.id)}>
    //         {{
    //           reference: () => (
    //             <ElButton type="danger" plain size="small">
    //               {$t('common.delete')}
    //             </ElButton>
    //           )
    //         }}
    //       </ElPopconfirm>
    //     </div>
    //   )
    // }

  ]
});

// ---------- 事件处理 ----------
/**
 * 删除用户
 * @param id 要删除的用户ID
 */
// 日志通常不支持删除操作
// async function handleDelete(id: number) {
  try {
    // 实际开发中此处应调用API
    console.log('删除ID:', id);
    // 删除成功后刷新数据
    getData();
  } catch (error) {
    console.error('提交失败:', error);
    // FIXME: 需要添加更详细的错误处理逻辑
  }
}

/**
 * 编辑用户
 * 打开编辑抽屉并填充数据
 * @param row 当前行数据
 */
// 日志通常不支持编辑操作
// function edit(row: Api.SystemSetting.login) { // 类型已更新为 Api.SystemSetting.login
  operateType.value = 'edit';
  editingData.value = { ...row };
  visible.value = true;
}

/**
 * 添加用户
 * 打开添加抽屉
 */
// 日志通常不支持添加操作
// function handleAdd() {
  operateType.value = 'add';
  editingData.value = null;
  visible.value = true;
}

/**
 * 批量删除
 * 删除选中的所有行
 */
// 日志通常不支持批量删除操作
// function handleBatchDelete() {
  console.log('批量删除:', checkedRowKeys.value);
  // 实际开发中需要调用API
  // 删除成功后刷新数据
  getData();
}

/**
 * 数据提交后回调
 * 提交表单后刷新数据
 */
// 日志通常不支持提交操作，此回调可能不再需要
// function handleSubmitted() {
  getData();
}

/**
 * 导出Excel文件
 * 将当前表格数据导出为Excel
 */
function exportExcel() {
  // 获取除了操作列和选择列之外的所有列
  const exportColumns = columns.value.slice(2);

  // 将数据转换为二维数组
  const excelList = data.value.map(item => exportColumns.map(col => getTableValue(col, item)));

  // 添加标题行
  const titleList = exportColumns.map(col => (isTableColumnHasTitle(col) && col.label) || undefined);
  excelList.unshift(titleList);

  // 创建工作簿和工作表
  const workBook = utils.book_new();
  const workSheet = utils.aoa_to_sheet(excelList);

  // 设置列宽
  workSheet['!cols'] = exportColumns.map(item => ({
    width: Math.round(Number(item.width) / 10 || 20)
  }));

  // 添加工作表到工作簿并导出
  utils.book_append_sheet(workBook, workSheet, '日志列表');
  writeFile(workBook, '日志数据.xlsx');
}

/**
 * 获取表格单元格值
 * 根据列定义和行数据获取单元格值
 */
function getTableValue(
  col: UI.TableColumn<UI.TableDataWithIndex<Api.SystemSetting.login>>,
  item: UI.TableDataWithIndex<Api.SystemSetting.login>
) {
  if (!isTableColumnHasKey(col)) {
    return '';
  }

  const { prop } = col;

  if (prop === 'operate' || prop === undefined) {
    return '';
  }

  if (prop === 'businessType') {
    const type = businessTypeMap[item.businessType as Api.SystemSetting.BusinessType] || { label: 'common.unknown' };
    return $t(type.label);
  }
  // 移除对 userRoles, status, userGender 的特殊处理，因为日志数据没有这些字段

  if (prop in item) {
    return item[prop as keyof UI.TableDataWithIndex<Api.SystemSetting.login>];
  }

  return '';
}

/**
 * 检查列是否有key属性
 */
function isTableColumnHasKey<T>(column: UI.TableColumn<T>): column is UI.TableColumnWithKey<T> {
  return Boolean((column as UI.TableColumnWithKey<T>).prop);
}

/**
 * 检查列是否有标题
 */
function isTableColumnHasTitle<T>(column: UI.TableColumn<T>): column is UI.TableColumnWithKey<T> & {
  label: string;
} {
  return Boolean((column as UI.TableColumnWithKey<T>).label);
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <!-- 搜索表单区域 - 日志页面可能需要自定义搜索或不显示搜索 -->
    <!-- <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" /> -->
    
    <!-- 表格卡片区域 -->
    <ElCard class="sm:flex-1-hidden card-wrapper">
      <template #header>
        <div class="flex items-center justify-between">
          <!-- 导出Excel按钮 -->
          <ElButton plain type="primary" @click="exportExcel">
            <template #icon>
              <icon-file-icons:microsoft-excel class="text-icon" />
            </template>
            导出excel
          </ElButton>
          
          <!-- 表头操作区域 -->
          <TableHeaderOperation
            v-model:columns="columnChecks"
            :disabled-delete="true"  // 日志不支持批量删除
            :loading="loading"
            // @add="handleAdd" // 日志不支持添加
            // @delete="handleBatchDelete" // 日志不支持删除
            :show-add-button="false" // 隐藏添加按钮
            :show-delete-button="false" // 隐藏删除按钮
            @refresh="getData"
          />
        </div>
      </template>
      
      <!-- 表格区域 -->
      <div class="h-[calc(100%-50px)]">
        <ElTable 
          v-loading="loading" 
          height="100%" 
          border 
          class="sm:h-full" 
          :data="data" 
          row-key="id"
          @selection-change="checkedRowKeys = $event"
        >
          <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
        </ElTable>
        
        <!-- 添加分页组件 -->
        <div class="mt-20px flex justify-end">
          <ElPagination
            v-if="pagination.total"
            layout="total,prev,pager,next,sizes"
            v-bind="pagination"
            @current-change="pagination['current-change']"
            @size-change="pagination['size-change']"
          />
        </div>
      </div>
    </ElCard>
    
    <!-- 用户操作抽屉 - 日志通常为只读，不需要操作抽屉 -->
    <!-- <OperateDrawer
      v-model:visible="visible"
      :operate-type="operateType"
      :row-data="editingData"
      @submitted="handleSubmitted"
    /> -->
    
  </div>
</template>

<style scoped>
/* 可添加自定义样式 */
</style>
